<template>
    <div class="y_bj" :style="y_bj">
      <div style="width: 85%; height: 600px; margin: auto;" class="xuanzhuan">
        <div class="denglu">

          <div class="leftdenglu" @click="denglushow()">
            <span>登录</span>
          </div>
          <div class="rightzhuce" @click="zhuceshow()">
            <span>注册</span>
          </div>
          <!--登陆-->
          <div id="denglufrom" v-show="denglu">

            <el-form ref="form" :model="form"   label-width="80px"  style="position: relative;left: -80px;">
              <el-form-item :rules="zhanghaorule">
                <el-input v-model="form.phone"  placeholder="请输入手机" style="width: 300px;padding-left: 10px;margin-top: 20px">
                </el-input>
              </el-form-item>
             <el-form-item>
              <el-input v-model="form.waitOne"  placeholder="6-20位密码，可用数字/字母/符号组合" style="width: 300px;padding-left: 10px;" type="password"></el-input>
             </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmit('from')" style="width: 300px;margin-left: 10px;background-color: #d51423">登陆</el-button>
              </el-form-item>

            </el-form>
            <!--<el-checkbox v-model="checked">下次自动登陆</el-checkbox>-->

          </div>
          <!--注册-->
          <div id="zhucefrom" v-show="zhuce">

            <el-form ref="form" :model="zhuceform"   label-width="80px"  style="position: relative;left: -80px;">
              <el-form-item :rules="zhanghaorule">
                <el-input v-model="zhuceform.phone"  placeholder="请输入手机号" style="width: 300px;padding-left: 10px;margin-top: 20px"v-bind:disabled="this.passtatus==1">
                </el-input>
              </el-form-item>
              <el-form-item >
                <el-input v-model="zhuceform.cole"  placeholder="请输入验证码" style="width: 100px;padding-left: 10px;float: left;" v-bind:disabled="this.passtatus==1"></el-input>
                <div class="login-code" @click="refreshCode">
                  <!--验证码组件-->
                        <s-identify :identifyCode="identifyCode"></s-identify>
                </div>
              </el-form-item>
              <el-form-item v-if="this.passtatus==1">
                <el-input v-model="zhuceform.waitOne"  placeholder="6-20位密码，可用数字/字母/符号组合" style="width: 300px;padding-left: 10px;"type="password"></el-input>
              </el-form-item>


              <el-form-item  v-if="this.passtatus==1">
                <el-input v-model="zhuceform.waitOne1"  placeholder="确认密码" style="width: 300px;padding-left: 10px;" type="password"></el-input>
              </el-form-item>

              <el-form-item>
                <el-checkbox v-model="mustread">我已经阅读并同意 <a href="#" style="text-decoration: none;" >《用户协议》</a></el-checkbox>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="onSubmitzc('zhuceform')" style="width: 300px;margin-left: 10px;background-color: #d51423">注册</el-button>
              </el-form-item>

            </el-form>


          </div>

        </div>

      </div>
    </div>
</template>

<script>
  import SIdentify from '../login-front/sidentify'
  import qs from 'qs'
    export default {
        name: "logincenter",
      components:{SIdentify},
      data(){
          return{

            y_bj: {
              backgroundImage: "url(" + require("@/assets/2d49394.jpg") + ")",
              backgroundRepeat: "no-repeat",
            },
            denglu:true,
            zhuce:false,
            rotateTimes:1,
            form: {
              phone: '',
              waitOne:''
            },
            zhuceform:{
              phone:'',
              cole:'',
              waitOne:'',
              waitOne1:'',

            },
            zhanghaorule:[
              { required: true, message: '请输入邮箱地址或手机号', trigger: 'blur' },
              { type: 'number', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
            ],
            // checked: false,
            mustread:false,
            identifyCodes: "1234567890",
            identifyCode: "",
            passtatus:''

          }
      },
      methods:{
          denglushow(){
            this.denglu = true;
            this.zhuce = false;
          },
        zhuceshow(){
          this.denglu = false;
          this.zhuce = true;
        },

        //登录提交按钮
        onSubmit(form){
          // if (this.checked == true){
          //   alert(JSON.stringify(this.form));
          // } else{
          //   this.$message.info("")
          // }
          if(this.form.phone==''){
            this.$message.error("手机号不能为空");
          }else{
            if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.form.phone)) {
              this.$alert('请输入正确手机号', '提示', {
                confirmButtonText: '确定',
              });
            }else{
              if(this.form.waitOne==''){
                this.$message.error("请输入密码");
              }else{
                if (!/^[a-zA-Z0-9]{6,20}$/.test(this.form.waitOne)) {
                  this.$alert('请输入规范的密码', '提示', {
                    confirmButtonText: '确定',
                  });
                }else{
                  this.$axios.get("http://localhost:8899/login?phone="+this.form.phone+"&waitOne="+this.form.waitOne).then(r=>{
                     // alert(JSON.stringify(r.data.data.urose));
                    if(r.data.code==200){
                      sessionStorage.setItem("user",r.data.data.token);
                      //用户id
                      sessionStorage.setItem("uid",r.data.data.uid);
                      //用户角色  0 学生 1 教师
                      sessionStorage.setItem("urose",r.data.data.urose);
                      //登录人是否是vip
                      sessionStorage.setItem("isvip",r.data.data.isvip);

                      this.$router.push("/personalCenter");
                      //this.$router.push("/curriculumcenter");
                    }else {
                      this.$message.error("登录失败");
                    }
                  })
                }

              }

            }

          }

        },
        // 注册的提交按钮
        onSubmitzc(formName){
            if (this.zhuceform.cole != this.identifyCode || this.zhuceform.cole == '') {
              this.$message.error("验证码错误！")
            }else if (this.mustread==false){
              this.$message.error("请阅读用户协议！")
            }else{
              if(this.zhuceform.phone !=''){
                if (!/^((1[3,5,8,7,9][0-9])|(14[5,7])|(17[0,6,7,8])|(19[7]))\d{8}$/.test(this.zhuceform.phone)) {
                  this.$alert('请输入正确手机号', '提示', {
                    confirmButtonText: '确定',
                  });
                }else {
                  this.$axios.get("http://localhost:8899/teacher-front/demo/user/queryByPhone?phone="+this.zhuceform.phone).then(r=>{
                    if(r.data.obj==1){
                      this.$message.error("账号已经存在");
                    }else {
                      this.passtatus=1;
                      if(this.zhuceform.waitOne!=''){
                        if (!/^[a-zA-Z0-9]{6,20}$/.test(this.zhuceform.waitOne)) {
                          this.$alert('请输入规范的密码', '提示', {
                            confirmButtonText: '确定',
                          });
                        }if(this.zhuceform.waitOne==this.zhuceform.waitOne1){
                          //alert("aaa")
                          this.$axios.post("http://localhost:8899/teacher-front/demo/user/inseform",qs.stringify(this.zhuceform)).then(r=>{
                            if(r.data.obj==1){
                                this.$message.success("注册成功");
                                this.denglu = true;
                                this.zhuce = false;
                                this.passtatus='';
                                this.zhuceform={phone:'', cole:'', waitOne:'', waitOne1:''}
                            }
                          })
                        }else {
                          this.$message.error("密码不一致")
                        }
                      }
                    }
                  })
                }

              }else{
                this.$message.error("手机号不能为空")
              }
            }


        },
        //添加数据
        zhuce(){

        },



        //验证码
        randomNum(min, max) {
          return Math.floor(Math.random() * (max - min) + min);
        },

        refreshCode() {
          this.identifyCode = "";
          this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
          for (let i = 0; i < l; i++) {
            this.identifyCode += this.identifyCodes[
              this.randomNum(0, this.identifyCodes.length)
              ];
          }
          console.log(this.identifyCode);
        },


      },mounted(){
        this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
      },
      created(){
          this.refreshCode();
      }
    }
</script>

<style scoped>
  .y_bj{
    width: 100%;
    height: 600px;
    font-family: 微软雅黑;
  }
  .denglu{
    float: right;
    background-color: white;
    width: 380px;
    /*height: 340px;*/
    border-radius: 20px;
    margin-top:80px ;
  }
  .leftdenglu{
    float: left;
    border-top-left-radius: 20px;
    width: 190px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: 0.5px solid darkgray;
    cursor: pointer;
  }
  .rightzhuce{
    float: right;
    border-top-right-radius: 20px;
    width: 190px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-bottom: 0.5px solid darkgray;
    cursor: pointer;
  }
  #denglufrom{
    width: 320px;
    /*height: 260px;*/
    margin: auto;
    margin-top: 60px;
  }


  #zhucefrom{
    width: 320px;
    /*height: 260px;*/
    margin: auto;
    margin-top: 60px;

  }
  .xuanzhuan{
    transition: 1s;
  }
  /*旋转*/
  .xuanzhuan:hover{
    /*transform: rotateY(180deg);*/
    /* 3D变形 */
    /*transform-style: preserve-3d;*/
    /*-webkit-perspective: 1000;*/
    /*-moz-perspective: 1000;*/
    /*-ms-perspective: 1000;*/
    /*perspective: 1000;*/
  }
.login-code{
  cursor: pointer;
  float: right;
}

</style>
